<html layout:decorate="~{default/layout}" xmlns:layout="http://www.w3.org/1999/xhtml">
<head>

    <style>
        .black_overlay{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1002;
            background: #000;
            opacity: 0.5;
        }
        .white_content {
            display: none;
            position: fixed;
            top: 10%;
            left: 10%;
            border: 1px solid rgba(0,0,0,.2);
            background-color: white;
            z-index: 1002;
            font-size: 16px;
            right: 10%;
            bottom: 10%;
        }
        .white_content_list {
            overflow: auto;
            position: absolute;
            top: 50px;
            bottom: 10px;
            left: 10px;
            right: 10px;
        }
        .white_content_small {
            display: none;
            position: fixed;
            top: 20%;
            left: 20%;
            right: 20%;
            bottom: 20%;
            border: 1px solid rgba(0,0,0,.2);
            background-color: white;
            z-index:1002;
        }
        .bdClass{
            padding: 5px 0;
            margin-bottom: 10px;
            border-bottom: 1px solid rgba(0,0,0,.2);
        }
        .bdClass > span {
            color: #428BCA;
            cursor: pointer;
            margin-bottom: 5px;
        }

        .carModelClass{
            background-color: #f9f9f9;
            padding: 10px 0;
        }
        .carModelClass > div > a {
            padding: 5px 10px;
        }
        a{
            cursor: pointer;
            color: black;
        }
        .search_condition{
            display: block;
        }
    </style>
    <script>
        //弹出隐藏层
        function ShowDiv(show_div,bg_div){
            document.getElementById(show_div).style.display='block';
            document.getElementById(bg_div).style.display='block' ;
            var bgdiv = document.getElementById(bg_div);
            bgdiv.style.width = document.body.scrollWidth;
            // bgdiv.style.height = $(document).height();
            // $("#"+bg_div).height($(document).height());
            $('#'+bg_div).addClass('black_overlay');
        }
        //关闭弹出层
        function CloseDiv(show_div,bg_div)
        {
            document.getElementById(show_div).style.display='none';
            document.getElementById(bg_div).style.display='none';
            $('#'+bg_div).removeClass('black_overlay');
        }
        function selectBrand(modelThis){
            //alert(brandName);
            var modelName = $(modelThis).text();
            var brandName =  $(modelThis).parent().parent().prev().text()
            $('#ADD_brand').val(brandName +'-' +modelName);
            CloseDiv('MyDiv','fade');
        }
        function showCarModels(brandThis) {
            var carModelDiv = $(brandThis).next();
            carModelDiv.toggle();
        }

        $(document).ready(function(){
            $("input[name='Q_LIKE_vehicledesc']").keydown(function(e){
                var curkey = e.which;
                if(curkey == 13){
                    $("#search-btn").click();
                    return false;
                }
            });
        });
    </script>
</head>
<body>
<div layout:fragment="content">
    <div class="main-content-inner">

        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="#">主页</a>
                </li>
                <li class="active">客户购车系统</li>
                <li class="active">新到店车源</li>
            </ul><!-- /.breadcrumb -->
        </div>

        <div class="page-content">
            <div class="search_condition">
                <form id="search-form">
                    时间范围:
                    <div style="display: inline-block" id="time_select">
                        <input class="form_date search-data" style="width:150px; background-color: white !important;"
                               type="text" readonly placeholder="开始时间"
                               id="start_time_select" data-link-field="start_time" data-link-format="yyyy-mm-dd">
                        <span>至</span>
                        <input class="form_date search-data" style="width:150px; background-color: white !important;"
                               type="text" readonly placeholder="结束时间"
                               id="end_time_select" data-link-field="end_time" data-link-format="yyyy-mm-dd">
                        <input type="hidden" id="start_time" name="Q_GTE_createtime" class="search-data">
                        <input type="hidden" id="end_time" name="Q_LTE_createtime" class="search-data">
                        车型:<input type="text" name="Q_LIKE_vehicledesc" class="search-data">
                    </div>
                    <button type="button" id="search-btn" class="btn btn-primary btn-search" >搜索</button>
                </form>
                <div class="space-4"></div>
                <form id="addForm">
                    <input type="text" name="brand" id="ADD_brand" class="search-data" readonly style="width: 300px;">
                    <input id="Button1" type="button" value="选择车型" class="btn btn-primary btn-search" onclick="ShowDiv('MyDiv','fade')" />
                    链接地址:<input type="text" name="urldress" class="search-data">
                    车源说明:<input type="text" name="vehicledesc" class="search-data">
                    <button type="button" onclick="addVehicle();" class="btn btn-primary btn-search" >添加</button>

                </form>

            </div>

            <div class="main-body">
                <table id="dataTable" data-url="/project/shopCarManage/shopCarData" data-page-list=[]  data-striped="true"
                       data-pagination="true" data-page-size="15" data-cache="false" data-toolbar-align="right">

                </table>
                <script>
                    //过程报警
                    var dataFormat_user = [
                        { checkbox: false },
                        { field:'id', title:'id', visible:false },
                        {field:'brand', title:'品牌车型', visible:true },
                        {field:'urldress', title:'链接地址', visible:true },
                        {field:'vehicledesc', title:'车源说明', visible:true },
                        {field: 'createtime', title: '创建日期', visible: true,
                            formatter: function(value, row, index) {
                                var unixTimestamp = new Date(row.createtime) ;
                                var html =unixTimestamp.toLocaleDateString();
                                return html;
                            }
                        },
                        {field: 'userid', title: '创建人', visible: true},
                        {field: 'id', title: '操作', sortable:false,
                            formatter:function (value,row,index) {
                                var html = '<a onclick="deleteVehicle('+row.id+');">删除</a>';
                                return html;
                            }
                        }];

                    function deleteVehicle(id) {
                        var data={id:id};
                        var url ='/project/shopCarManage/vehicle_del';

                        $.ajax({
                            type: "POST",
                            url: url,
                            data: data,
                            dataType: "json",
                            success: function(result){
                                console.log(result);
                                if(typeof result == 'object'){
                                    var data = result;
                                }else{
                                    var data = eval('('+result+')');
                                }
                                if (data.type == "alert") {
                                    alert(data.message);
                                    $("#dataTable").bootstrapTable("selectPage",1);
                                }
                            }
                        });
                    }
                    //将form中的值转换为键值对。
                    function getFormJson(frmId) {
                        var o = {};
                        var a = $("#"+frmId).serializeArray();
                        $.each(a, function () {
                            if (o[this.name] !== undefined) {
                                if (!o[this.name].push) {
                                    o[this.name] = [o[this.name]];
                                }
                                o[this.name].push(this.value || '');
                            } else {
                                o[this.name] = this.value || '';
                            }
                        });

                        return o;
                    }

                    function addVehicle() {
                        var dataPara = getFormJson("addForm");
                        var url ='/project/shopCarManage/shopCarAdd';
                        if($('#ADD_brand').val().length==0){
                            alert('品牌车型不能为空!');
                            return;
                        }

                        if($('input[name="urldress"]').val().length==0){
                            alert('链接地址不能为空!');
                            return;
                        }
                        if($('input[name="vehicledesc"]').val().length==0){
                            alert('车源说明不能为空!');
                            return;
                        }



                        $.ajax({
                            type: "POST",
                            url: url,
                            data: dataPara,
                            dataType: "json",
                            success: function(result){
                                console.log(result);
                                if(typeof result == 'object'){
                                    var data = result;
                                }else{
                                    var data = eval('('+result+')');
                                }
                                if (data.type == "alert") {
                                    if(confirm(data.message)){
                                        window.location.reload();
                                    }
                                    $("#dataTable").bootstrapTable("selectPage",1);
                                }
                            }
                        });
                    }


                    /**
                     * 限制开始时间和结束时间不能互相超过
                     */
                    $(function () {

                        getTable(dataFormat_user, "dataTable");

                        $("#start_time_select").datetimepicker({
                            bootcssVer: 3,   //设置读取bootstrap3，否则默认读取bootstrap2，左右箭头会不见
                            startView: 2,
                            minView: "month",
                            format: "yyyy-mm-dd",
                            todayBtn: "linked",
                            todayHighlight: true,
                            language: "zh-CN",
                            autoclose: true,
                            showMeridian: true
                        }).on('changeDate', function (ev) {
                            $('#start_time').val($('#start_time').val()+' 00:00:00');
                            //$("#end_time_select").datetimepicker('setStartDate', starttime);
                        });
                        $("#end_time_select").datetimepicker({
                            bootcssVer: 3,   //设置读取bootstrap3，否则默认读取bootstrap2，左右箭头会不见
                            startView: 2,
                            minView: "month",
                            format: "yyyy-mm-dd",
                            todayBtn: "linked",
                            todayHighlight: true,
                            language: "zh-CN",
                            autoclose: true,
                            showMeridian: true
                        }).on('changeDate', function (ev) {
                            $('#end_time').val($('#end_time').val()+' 23:59:59');
                            //$("#start_time_select").datetimepicker('setEndDate', endtime);
                        });
                    });

                </script>
            </div>
            <!--弹出层时背景层DIV-->
            <div id="fade" class="">
            </div>
            <div id="MyDiv" class="white_content">
                <div style="text-align: right; height: 40px;
                        padding: 10px;
                        border-bottom: 1px solid rgba(0,0,0,.2);">
                        <span style="
                            font-size: 16px;
                            color: #555;
                            cursor: pointer;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
                </div>
                <div class="white_content_list">
                    <div th:each="brand:${brandMaps}">
                        <div th:text="${brand.key}"></div>

                        <div th:each="brandBo:${brand.value.brandBOS}" style="display: block;" class="bdClass" >
                            <span th:text="${brandBo.value.brandName}"  onclick="showCarModels(this)"></span>
                            <div style="display: none;" class="carModelClass">
                                <div th:each="carModels:${brandBo.value.carModels}" style="display: inline-block;">
                                    <a class="" th:text="${carModels.modelName}" onclick="selectBrand(this);"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
</html>